<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style> 
			/* 伪 类选择器   语法：任意选择器：hover【悬停】  每个伪类选择器  具备特点
			                所有元素都具备：hover  【常见伪类选择器】
			 */ 
			h1:hover{
				background: #ff55ff;
				color: #ff557f;
			}
			/* 
			 *伪类选择器    ：link   链接未被点击时
			 *             ：active 链接被点击时
			 *             ：visited 链接点击后状态
			 *             ：hover 悬停点击后状态
			 * 主要结合在一起   针对a元素效果
			 */ 
			a:link{  /*未访问状态*/
				color:   #ffaa00;
				/* 去掉超链接下划线 */
				text-decoration: none;
			}
			a:active{/*被点击状态*/
				color: #ff5500;
				background: #ff55ff;
			}
			a:visited{ /*点击后状态*/
				color: #000000;
			}
			a:hover{
				font-size: 36px;
			}
			/**
			 * 伪类选择器：  input：focus  获取焦点  鼠标点击输入框时效果
			 * 
			 针对输入框  input元素
			 */
			input:focus{
				background: #ffff00;
			}
			/* 伪类选择器：    ：first-child第一个儿子元素
			                  ：last-child 最后一个儿子元素
			                  ：nth-child(n)匹配n个儿子元素
				针对：父子级，默认父子级table
			 */
			li:first-child{
				background: #55ffff;
				color: #000000;
			}
			li:last-child{
				font-size: 15pt;
			}
			li:nth-child(2){
				background: #ffff7f;
				font-size: 15px;
			}
			li:nth-child(3){
				background: #aa55ff;
				font-size: 15px;
			}
		</style>
	</head>
	<body>
		<h1>鼠标悬停效果</h1>
		<a href="#">超链接</a>
		<input type="text" />
		<!-- 元素之间存在父子级关系，默认岑在父子关系 -->
		<ol>
			<li>唐山</li>
			<li>邢台</li>
			<li>承德</li>
			<li>保定</li>
		</ol>
	</body>
</html>